<template>
  <div class="compare-container">
    <template v-if="!$store.state.userModule.isLogin">
      <div class="need-login-tip">
        <div class="iconfont icon-person need-login-icon"></div>
        <div class="need-login-text">
          <span>点击 </span>
          <a
            class="link"
            target="_blank"
            href="https://passport.jd.com/new/login.aspx"
            >登录京东</a
          >
          <span>后刷新本页面查看</span>
        </div>
        <div class="desc">
          （免责说明：使用本功能没有进行任何抽佣，订单跟不到，咨询京东客服）
        </div>
      </div>
    </template>
    <template>
      <ul class="compare-product-wrapper jtt-clearfix">
        <li
          class="product-item jtt-fl"
          :key="index"
          v-for="(item, index) in $store.state.productInfo.unionRecommendGoods"
        >
          <a :href="'https://item.jd.com/' + item[0].skuId + '.html'">
            <el-image
              class="product-img"
              lazy
              :src="
                'https://img12.360buyimg.com/n5/s500x500_' + item[0].materialUrl
              "
            ></el-image>
          </a>

          <div class="body">
            <h2 class="product-name jtt-ellipsis">
              {{ item[0].skuName }}
            </h2>
            <div class="jtt-clearfix mt-13">
              <div class="jtt-fl price">￥{{ item[0].finalPrice }}</div>
              <div class="jtt-fr commission">
                佣金
                <span class="commission-price"
                  >￥{{ item[0].wlCommission }}</span
                >
              </div>
            </div>
            <div class="jtt-clearfix mt-8" v-if="item[0].couponDiscount">
              <div class="coupon jtt-fl">
              <span class="label">券</span>
              <span class="coupon-value">{{item[0].couponDiscount}}</span>
            </div>
              <div class="jtt-fr share">
                <span>月推广</span>
                <span class="promote-data">{{
                  item[0].inOrderComm30Days
                }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </template>
    <foot></foot>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.compare-container {
  min-height: 100px;
  .need-login-tip {
    .need-login-icon {
      font-size: 48px;
      width: 48px;
      line-height: 48px;
      height: 48px;
      margin: 0 auto;
    }
    .need-login-text {
      margin-top: 14px;
      font-size: 12px;
      color: rgba(67, 67, 67, 1);
      text-align: center;
      .link {
        margin: 0 4px;
        color: rgba(245, 45, 54, 1);
      }
    }
    .desc {
      margin-top: 11px;
      text-align: center;
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
    }
  }
  .compare-product-wrapper {
    height: 510px;
    overflow-y: auto;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
    .product-item {
      margin-bottom: 10px;
      margin-right: 20px;
      width: 166px;
      height: 270px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      .mt-13 {
        margin-top: 13px;
      }
      .mt-8 {
        margin-top: 8px;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
      .product-img {
        width: 100%;
        height: 166px;
      }
      .body {
        padding: 11px;
        .product-name {
          height: 12px;
          line-height: 12px;
          font-size: 12px;
          font-weight: 400;
          color: #434343;
        }
        .price {
          font-size: 14px;
          font-weight: 400;
          color: #f52d36;
        }
        .commission {
          font-size: 14px;
          color: rgba(102, 102, 102, 1);
        }
        .commission-price {
          font-size: 14px;
          font-weight: 400;
          color: #f52d36;
        }
        .coupon {
          height: 18px;
          border: 1px solid #6862ff;
          border-radius: 4px;
          .label {
            display: inline-block;
            width: 20px;
            height: 18px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 18px;
            background: linear-gradient(-90deg, #9b74ff, #5f5fff);
            border-radius: 4px 0px 0px 4px;
          }
          .coupon-value {
            font-size: 12px;
            color: #6862ff;
            margin: 0 4px;
            line-height: 18px;
          }
        }
        .share {
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
          .promote-data {
            font-size: 12px;
            color: rgba(245, 45, 54, 1);
          }
        }
      }
    }
  }
}
</style>